<template>
  <Dialog v-model="dialogVisible" title="考勤详情" width="800px">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="考生姓名">
        {{ attendanceData.candidateName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="身份证号">
        {{ attendanceData.idCard || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="评价计划">
        {{ attendanceData.planName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="评价科目">
        {{ attendanceData.subjectName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="考试日期">
        {{ attendanceData.examDate || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="考试时间">
        {{ attendanceData.examTime || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="考试地点">
        {{ attendanceData.examLocation || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="出勤状态">
        <el-tag :type="getStatusColor(attendanceData.attendanceStatus)">
          {{ getStatusName(attendanceData.attendanceStatus) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="签到时间">
        {{ attendanceData.checkInTime || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="签退时间">
        {{ attendanceData.checkOutTime || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="实际考试时长">
        {{ getExamDuration() }}
      </el-descriptions-item>
      <el-descriptions-item label="迟到时间">
        {{ getLateMinutes() }}
      </el-descriptions-item>
      <el-descriptions-item label="早退时间" v-if="attendanceData.attendanceStatus === 3">
        {{ getEarlyLeaveMinutes() }}
      </el-descriptions-item>
      <el-descriptions-item label="考勤记录员">
        {{ attendanceData.recordBy || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="记录时间">
        {{ attendanceData.recordTime || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="备注" :span="2" v-if="attendanceData.remark">
        <div style="white-space: pre-wrap;">
          {{ attendanceData.remark }}
        </div>
      </el-descriptions-item>
    </el-descriptions>
    
    <!-- 考勤照片 -->
    <el-divider content-position="left" v-if="attendanceData.photos && attendanceData.photos.length > 0">
      考勤照片
    </el-divider>
    <div v-if="attendanceData.photos && attendanceData.photos.length > 0" style="display: flex; gap: 10px; flex-wrap: wrap;">
      <el-image 
        v-for="(photo, index) in attendanceData.photos" 
        :key="index"
        :src="photo.url" 
        :alt="photo.name"
        style="width: 120px; height: 120px; border-radius: 4px;"
        fit="cover"
        :preview-src-list="attendanceData.photos.map(p => p.url)"
        :initial-index="index"
      />
    </div>
    
    <!-- 异常情况 -->
    <el-divider content-position="left" v-if="attendanceData.exceptions && attendanceData.exceptions.length > 0">
      异常情况
    </el-divider>
    <el-table 
      v-if="attendanceData.exceptions && attendanceData.exceptions.length > 0"
      :data="attendanceData.exceptions" 
      border 
      style="width: 100%"
    >
      <el-table-column prop="exceptionType" label="异常类型" width="120">
        <template #default="{ row }">
          <el-tag type="warning">{{ row.exceptionType }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="exceptionTime" label="发生时间" width="150" />
      <el-table-column prop="exceptionDesc" label="异常描述" />
      <el-table-column prop="handleStatus" label="处理状态" width="100">
        <template #default="{ row }">
          <el-tag :type="row.handleStatus === 1 ? 'success' : 'danger'">
            {{ row.handleStatus === 1 ? '已处理' : '未处理' }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
    
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'

const dialogVisible = ref(false)
const attendanceData = ref({} as any)

const getStatusName = (status: number) => {
  const statusMap = { 1: '正常出勤', 2: '迟到', 3: '早退', 4: '缺勤' }
  return statusMap[status] || '-'
}

const getStatusColor = (status: number) => {
  const colorMap = { 1: 'success', 2: 'warning', 3: 'warning', 4: 'danger' }
  return colorMap[status] || 'info'
}

const getExamDuration = () => {
  if (!attendanceData.value.checkInTime || !attendanceData.value.checkOutTime) {
    return '-'
  }
  const start = dayjs(attendanceData.value.checkInTime)
  const end = dayjs(attendanceData.value.checkOutTime)
  const duration = end.diff(start, 'minute')
  return `${Math.floor(duration / 60)}小时${duration % 60}分钟`
}

const getLateMinutes = () => {
  if (attendanceData.value.attendanceStatus !== 2 || !attendanceData.value.checkInTime || !attendanceData.value.examTime) {
    return '-'
  }
  const examTime = dayjs(`${attendanceData.value.examDate} ${attendanceData.value.examTime}`)
  const checkInTime = dayjs(attendanceData.value.checkInTime)
  const lateMinutes = checkInTime.diff(examTime, 'minute')
  return lateMinutes > 0 ? `${lateMinutes}分钟` : '-'
}

const getEarlyLeaveMinutes = () => {
  if (attendanceData.value.attendanceStatus !== 3 || !attendanceData.value.checkOutTime) {
    return '-'
  }
  // 假设考试时长为2小时
  const examTime = dayjs(`${attendanceData.value.examDate} ${attendanceData.value.examTime}`)
  const expectedEndTime = examTime.add(2, 'hour')
  const checkOutTime = dayjs(attendanceData.value.checkOutTime)
  const earlyMinutes = expectedEndTime.diff(checkOutTime, 'minute')
  return earlyMinutes > 0 ? `${earlyMinutes}分钟` : '-'
}

const open = (data: any) => {
  dialogVisible.value = true
  attendanceData.value = data
}

defineExpose({ open })
</script> 